<template>
	<u-swiper height="470rpx" :list="swiperList"></u-swiper>
	<view class="goods-info">
		<view class="price-wrap">
			<view class="real-price">￥8.80</view>
			<view class="th-price">￥19.90</view>
			<view class="in-price">积分可抵扣0.12元</view>
		</view>
		<view class="goods-title">湿巾80抽</view>
		<u-gap height="4rpx" bgColor="#F6F6F6"></u-gap>
		<view class="sell-count">已售1 | 剩余1998</view>
		<view class="move-fee">
			<view class="move">运费</view>
			<view class="is-free">免运费</view>
		</view>
	</view>
	<view class="rich-text-wrap">
		<view class="rich-title">商品详情</view>
		<u-gap height="4rpx" bgColor="#F6F6F6"></u-gap>
		<view class="parse-wrap">
			<u-parse :content="content"></u-parse>
		</view>
		<view class="buy-btn">
			<u-button throttleTime="1000" color="#07C160" shape="circle" @click="goPaySuccess">立即购买</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	// 轮播图
	const swiperList = reactive([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])
	const content = ref('<p style="color: red;">我是富文本</p>')
	const goPaySuccess = () => {
		uni.navigateTo({
			url: '/order/shopping/place'
		})
	}
</script>

<style lang="scss" scoped>
	.goods-info {
		padding: 112rpx 30rpx 40rpx;
		background: #fff;

		.price-wrap {
			display: flex;
			align-items: center;

			.real-price {
				font-size: 28rpx;
				color: #FF7E00;
			}

			.th-price {
				font-size: 24rpx;
				text-decoration: line-through;
				color: #C0C0C0;
				margin-left: 20rpx;
			}

			.in-price {
				@include flex-center(154rpx, 28rpx);
				background: #C7FFDF;
				border: 1rpx solid #0EC86C;
				border-radius: 14rpx 13rpx 13rpx 0;
				margin-left: 20rpx;
				font-size: 16rpx;
				color: #0EC86C;
			}
		}

		.goods-title {
			margin-top: 24rpx;
			margin-bottom: 34rpx;
			color: #292929;
			font-size: 32rpx;
		}

		.sell-count {
			margin-top: 34rpx;
			font-size: 24rpx;
			color: #565656;
		}

		.move-fee {
			@include flex-between();
			font-size: 24rpx;
			color: #000000;
			margin-top: 52rpx;
			font-weight: 400;
		}
	}
	
	.rich-text-wrap {
		margin-top: 22rpx;
		padding: 32rpx;
		background: #fff;
		.rich-title {
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}
		.parse-wrap {
			margin-top: 23rpx;
		}
		.buy-btn {
			margin-top: 30rpx;
		}
	}
</style>